<template>
  <div class="page-basic">
    <a-form
      ref="basicRef"
      :model="formState"
      :rules="basicRules"
      :labelCol="{ style: { width: '84px' } }"
      :colon="false"
      labelAlign="right"
    >
      <div class="page-basic-hasBtn">
        <a-form-item label="文章名称" name="article_name">
          <a-input
            v-model:value.trim="formState.article_name"
            :maxlength="50"
            placeholder="请输入文章名称"
            class="w-[359px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-classify">
        <a-form-item label="文章分类" class="mr-[8px]">
          <a-cascader
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
            v-model:value="classList"
            class="w-[200px]"
            change-on-select
            :field-names="{ label: 'name', value: 'id', children: 'subcateg' }"
            :options="atlasList"
            placeholder="请选择文章分类"
            @change="handleSelectChange"
          >
            <template #suffixIcon>
              <a-tooltip placement="top" color="#fff">
                <template #title> 双击选中父级 </template>
                <div class="ellipsis-text">
                  <question-circle-outlined />
                </div>
              </a-tooltip>
            </template>
          </a-cascader>
        </a-form-item>
        <a-form-item name="article_album_ids">
          <a-select
            v-model:value="formState.article_album_ids"
            mode="multiple"
            class="w-[200px] ml-[8px]"
            max-tag-count="responsive"
            placeholder="请选择文章专辑"
            :options="albumList"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          ></a-select>
        </a-form-item>
        <a-form-item name="publish_state">
          <a-select
            v-model:value="formState.publish_state"
            placeholder="完结状态"
            class="select-w-200 ml-[8px]"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option :value="1">已完结</a-select-option>
            <a-select-option :value="2">连载中</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div class="page-basic-filmType" v-if="showFilmType && typeList.length > 0">
        <a-form-item label="文章类型" name="type_ids">
          <a-checkbox-group v-model:value="formState.type_ids" name="checkboxgroup" :options="typeList" />
        </a-form-item>
      </div>
      <div class="page-basic-hasBtn">
        <a-form-item label="作者" name="article_author">
          <a-input
            v-model:value="formState.article_author"
            :maxlength="50"
            placeholder="请输入作者"
            class="w-[359px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-hasBtn">
        <a-form-item label="是否付费" name="article_price_type">
          <a-radio-group v-model:value="formState.article_price_type" @change="handlePriceChange">
            <a-radio :value="1" class="m-r-95">免费</a-radio>
            <a-radio :value="2" class="m-r-95" disabled>付费</a-radio>
            <a-radio :value="3" class="m-r-6" disabled>点播</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
      <a-form-item name="article_price" v-if="formState.article_price_type !== 1" style="margin-left: 80px">
        <a-input
          v-model:value.trim="formState.article_price"
          :maxlength="5"
          class="w-[359px]"
          :placeholder="formState.article_price_type === 2 ? '请填写付费金币数量' : '请填写点播金币数量'"
          suffix="金币"
        />
      </a-form-item>
      <div class="page-basic-common">
        <div class="page-basic-common-title">文章简介</div>
        <a-form-item label="简介内容" name="article_introduction">
          <a-textarea
            v-model:value="formState.article_introduction"
            placeholder="请输入文章简介"
            show-count
            :maxlength="1000"
            class="w-[600px] h-[170px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">文章封面</div>
        <div class="flex flex-nowrap">
          <a-form-item label="竖版封面">
            <div>
              <a-radio-group v-model:value="formState.article_cover_vertical_type" @change="handleVerticalTypeChange">
                <a-radio :value="1" class="mr-[120px]">文件</a-radio>
                <a-radio :value="2">URL</a-radio>
              </a-radio-group>
              <div>
                <div class="flex items-center h-[32px]">
                  <UploadImage
                    v-if="formState.article_cover_vertical_type === 1"
                    imgType="3"
                    fileType="0"
                    fileUrl="v1/common/upload"
                    @getImageInfo="getLineImageInfo"
                  >
                    <a-input-search
                      v-model:value="formState.article_cover_vertical"
                      enter-button="上传文件"
                      @search="onLineSearch"
                      readOnly
                      class="w-[359px]"
                    />
                  </UploadImage>
                  <a-input
                    v-else
                    v-model:value="formState.article_cover_vertical"
                    @blur="handleVerticalBlur"
                    placeholder="请输入URL地址"
                    class="w-[359px]"
                  />
                  <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="verticalPreviewImage">
                    <template #title>
                      <img
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                        :src="verticalPreviewImage"
                      />
                    </template>
                    <a href="javascript:;" class="whitespace-nowrap">
                      <fund-view-outlined class="icon-preview text-[18px]" /> 预览
                    </a>
                  </a-tooltip>
                </div>
                <p class="source-introduce">
                  {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '' }}
                  {{ storage.get('img_size') ? storage.get('img_size') + '以内；' : '' }}建议尺寸158*217px
                </p>
              </div>
            </div>
          </a-form-item>
          <a-form-item label="横版封面" class="ml-[126px]">
            <div>
              <a-radio-group
                v-model:value="formState.article_cover_horizontal_type"
                @change="handleHorizontalTypeChange"
              >
                <a-radio :value="1" class="mr-[120px]">文件</a-radio>
                <a-radio :value="2">URL</a-radio>
              </a-radio-group>
              <div>
                <div class="flex items-center h-[32px]">
                  <UploadImage
                    v-if="formState.article_cover_horizontal_type === 1"
                    imgType="3"
                    fileType="0"
                    fileUrl="v1/common/upload"
                    @getImageInfo="getRowImageInfo"
                  >
                    <a-input-search
                      v-model:value="formState.article_cover_horizontal"
                      enter-button="上传文件"
                      @search="onRowSearch"
                      readOnly
                      class="w-[359px]"
                    />
                  </UploadImage>
                  <a-input
                    v-else
                    v-model:value="formState.article_cover_horizontal"
                    @blur="handleHorizontalBlur"
                    placeholder="请输入URL地址"
                    class="w-[359px]"
                  />
                  <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="horizontalPreviewImage">
                    <template #title>
                      <img
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                        :src="horizontalPreviewImage"
                      />
                    </template>
                    <a href="javascript:;" class="whitespace-nowrap">
                      <fund-view-outlined class="icon-preview text-[18px]" /> 预览
                    </a>
                  </a-tooltip>
                </div>
                <p class="source-introduce">
                  {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '' }}
                  {{ storage.get('img_size') ? storage.get('img_size') + '以内；' : '' }}建议尺寸150*84px
                </p>
              </div>
            </div>
          </a-form-item>
        </div>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">上传章节</div>
        <div class="address-content">
          <div class="address-content-file" v-for="(item, index) in formState.chapters">
            <div class="address-content-file-top">
              <div class="left-title">
                <div class="left-title-title">
                  <span class="mr-[5px]">第</span>
                  <div v-if="!item.is_edit">{{ item.chapter_no }}</div>
                  <a-input
                    v-else
                    v-model:value.number="item.chapter_no"
                    class="w-[44px]"
                    @blur="handleInput(item, index)"
                  />
                  <span class="ml-[5px]">章</span>
                </div>
                <a-button type="primary" size="small" @click="changeSection(item, index)">{{
                  !item.is_edit ? '修改章节' : '完成'
                }}</a-button>
                <a-input
                  v-model:value.trim="item.chapter_name"
                  :maxlength="50"
                  placeholder="请输入章节名称"
                  class="left-title-input"
                >
                </a-input>
              </div>
              <div class="right-btn">
                <a-button type="primary" size="small" @click="clearAddress(index)">清空</a-button>
                <a-button danger size="small" @click="deleteAddress(index)">删除</a-button>
              </div>
            </div>
            <a-textarea
              class="address-content-file-textarea"
              :class="`drop-${index}`"
              :maxlength="10000"
              show-count
              v-model:value="formState.chapters[index].article_content"
              placeholder="请输入章节内容，或拖入文档至输入框，只能拖入.txt格式文件，文件不能超过500kb"
            />
          </div>
        </div>
        <span style="margin-left: 72px" @click="addAddress">
          <a href="javascript:;"> <i class="iconfont icon-add text-[16px] mr-[8px]"></i><span>添加章节</span> </a>
        </span>
        <a-form-item label="文章状态" class="mt-[34px]" name="article_status">
          <a-radio-group v-model:value="formState.article_status">
            <a-radio :value="1" class="mr-[120px]">启用</a-radio>
            <a-radio :value="2">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch, inject } from 'vue'
import UploadImage from '@/components/components/upload-image/UploadImage.vue'
import { formState, resetExtendFunc, type chaptersItem, isPopularity } from './state'
import { message } from 'ant-design-vue'
import type { ArticleAlbumData } from '@/types/site/article/articleAlbum'
import { storage } from '@/utils/storage'
import apis from '@/apis'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const {
  site: { article_classify_list, add_article, detail_article, update_article, article_album_list, article_type_byClass }
} = apis
const basicRef = ref()
const articleId = ref('') //文章id
const classList = ref<string[]>([]) //分类数据
const albumList = ref<{ value: string; label: string }[]>([]) //专辑数据
const typeList = ref<{ value: string; label: string }[]>([]) //文章类型数据
const atlasList = ref() //文章分类数据
const siteId = storage.get('siteId') //站点id
const verticalPreviewImage: any = ref('') //竖版封面预览
const horizontalPreviewImage: any = ref('') //横版封面预览
const baseUrl: any = inject('baseUrl')
const reg = /^(0|\+?[1-9][0-9]{0,4})$/ //五位正整数包含0
const chineseReg = /[\u4E00-\u9FA5\uF900-\uFA2D]{1,}/
const validatePrice = (rule: any, value: any, callback: any) => {
  if (!value) {
    if (formState.article_price_type == 2) {
      return Promise.reject('请填写付费金币数量')
    } else {
      return Promise.reject('请填写点播金币数量')
    }
  } else if (!reg.test(value)) {
    return Promise.reject('请输入0-99999的金币数量')
  } else {
    return Promise.resolve()
  }
}
const basicRules = reactive({
  article_name: [{ required: true, message: '请输入文章名称' }],
  article_price: [{ required: true, validator: validatePrice, trigger: 'blur' }]
})
// 处理txt拖拽上传
const forbidden = () => {
  document.addEventListener('drop', (e: any) => {
    console.log('route.name: ', route.name, 'EditArticle')
    if (route.name === 'EditArticle') {
      // const index = e.path[1].className.split('drop-')[1]
      const index = e.target.parentNode.className.split('drop-')[1]
      e.stopPropagation()
      e.preventDefault()
      const { files } = e.dataTransfer
      if (!files.length) {
        return false
      }
      const file = files[0]
      const limit = file.size / 1024 <= 500
      const isNotTxt = file.name.indexOf('.txt') === -1
      if (!limit || isNotTxt) return message.warning('只能拖入.txt格式文件，文件不能超过500kb')
      const fileRead = new FileReader()
      fileRead.readAsText(file)
      fileRead.onload = (res: any) => {
        console.log('res: ', res)
        const length = formState.chapters[index].article_content.length
        if (length < 10000) {
          formState.chapters[index].article_content += res.target.result.substring(0, 10000 - length)
        } else {
          formState.chapters[index].article_content = res.target.result.substring(0, 10000)
        }
      }
      return formState.chapters[index].article_content
    }
  })
  document.addEventListener('dropover', (e) => e.preventDefault())
}
//重置表单
const resetFormFunc = () => {
  basicRef.value?.resetFields()
  formState.article_categ_id = undefined
  formState.article_subcateg_id = undefined
  formState.chapters = [
    {
      chapter_no: '1',
      chapter_name: '',
      article_content: '',
      is_edit: false
    }
  ]
  formState.article_cover_horizontal = undefined
  formState.article_cover_horizontal_type = 1
  formState.article_cover_vertical = undefined
  formState.article_cover_vertical_type = 1
  formState.article_album_ids = undefined
  //重置扩展信息
  formState.article_keyword = undefined
  formState.article_tags = undefined
  formState.article_pop_add_star = 3
  formState.article_pop_star = 3
  formState.article_tags_copy = undefined
  isPopularity.value = false
  resetExtendFunc()
}
//树形数据数据处理 过滤所有子节点 递归
const parseTreeArray = (treeArray: any, disable: boolean) => {
  treeArray.forEach((item: any) => {
    if (item.subcateg && item.subcateg.length > 0) {
      if (item.status === 2) {
        item.disabled = true
        parseTreeArray(item.subcateg, true)
      }
    } else {
      for (var key in item) {
        if (Array.isArray(item[key]) && item[key].length === 0) {
          delete item[key]
        }
      }
      if (disable) {
        item.disabled = true
      } else {
        if (item.status === 2) {
          item.disabled = true
        }
      }
    }
  })
}
//获取分类接口
const getClassList = () => {
  article_classify_list({ site_id: siteId, keyword: undefined, categ_status: 1 }).then((res: any) => {
    if (res?.categ.length === 0) return []
    parseTreeArray(res?.categ, false)
    atlasList.value = res?.categ
  })
}
//文章分类change事件
const handleSelectChange = (value: any, selectedOptions: any) => {
  console.log('value: ', value, selectedOptions)
  if (!value) {
    formState.article_categ_id = undefined
    formState.article_subcateg_id = undefined
    return false
  }
  formState.article_categ_id = value[0]
  formState.article_subcateg_id = value[1]
  console.log(formState, '123123')
}
const handlePriceChange = () => {
  formState.article_price = undefined

  basicRef.value.clearValidate('article_price')
}
//获取文章专辑数据
const getAlbumList = () => {
  article_album_list({ site_id: siteId, album_status: 1 }).then((res: any) => {
    console.log(res.albums, 'album')
    res.albums.forEach((item: ArticleAlbumData) => {
      albumList.value.push({
        label: item.album_name,
        value: item.album_id
      })
    })
    console.log('albumList: ', albumList.value)
  })
}

//根据分类查类型
const getTypeByClass = () => {
  if (!formState.article_categ_id || formState.article_categ_id === '0') return false
  article_type_byClass({ categ_id: formState.article_categ_id }).then((res: any) => {
    typeList.value = res?.types ?? []
    if (typeList.value.length <= 0) return false
    typeList.value = typeList.value.map((item: any) => {
      return { value: item.type_id, label: item.type_name }
    })
  })
}
const handleHorizontalBlur = (e: any) => {
  horizontalPreviewImage.value = e.target.value
}
const handleVerticalBlur = (e: any) => {
  verticalPreviewImage.value = e.target.value
}
//竖版封面事件
const handleVerticalTypeChange = () => {
  basicRef.value.clearValidate(['article_cover_vertical'])
  formState.article_cover_vertical = ''
  verticalPreviewImage.value = ''
}

//横版封面事件
const handleHorizontalTypeChange = () => {
  basicRef.value.clearValidate(['article_cover_horizontal'])
  formState.article_cover_horizontal = ''
  horizontalPreviewImage.value = ''
}
//横版
const onRowSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
//横版
const getRowImageInfo = (value: any) => {
  console.log('value: ', value)
  formState.article_cover_horizontal = value
  if (formState.article_cover_horizontal_type === 1) return (horizontalPreviewImage.value = baseUrl + value)
  horizontalPreviewImage.value = value
}
//竖版
const onLineSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
const getLineImageInfo = (value: any) => {
  console.log('value: ', value)
  formState.article_cover_vertical = value
  if (formState.article_cover_vertical_type === 1) return (verticalPreviewImage.value = baseUrl + value)
  verticalPreviewImage.value = value
}
//计数
const getCount = (chapter_no: number) => {
  var count = 0
  formState.chapters.forEach((item: any) => {
    if (item.chapter_no == chapter_no) {
      count++
    }
  })
  return count
}
const isNumber = /\d/
const handleInput = (item: any, index: number) => {
  console.log('item: ', item)
  if (!(item.chapter_no + '').trim()) {
    item.chapter_no = index + 1
    return message.warning('章节不能为空')
  }
  if (chineseReg.test(item.chapter_no)) {
    item.chapter_no = index + 1
  } else {
    console.log('item.chapter_no: ', item.chapter_no)
    if (!isNumber.test(item.chapter_no)) {
      item.chapter_no = index + 1
      return message.warning('只能输入数字')
    }
    if (getCount(item.chapter_no) > 1) {
      message.warning('修改失败，章节编号已存在')
      item.chapter_no = index + 1
    }
  }
}
//修改章节
const changeSection = (item: any, index: any) => {
  console.log(item.chapter_no, typeof item.chapter_no)
  if (!item.is_edit) {
    item.is_edit = !item.is_edit
  } else {
    if (chineseReg.test(item.chapter_no)) {
      item.chapter_no = index + 1
    } else {
      console.log('item.chapter_no: ', item.chapter_no)
      if (!isNumber.test(item.chapter_no)) {
        item.chapter_no = index + 1
        return message.warning('只能输入数字')
      }
      if (getCount(item.chapter_no) > 1) {
        message.warning('修改失败，章节编号已存在')
        item.chapter_no = index + 1
      }
    }
    item.is_edit = !item.is_edit
  }
}
//添加文章
const addAddress = () => {
  const len = formState.chapters.length + 1
  formState.chapters.push({
    chapter_no: len.toString(),
    chapter_name: '',
    article_content: '',
    is_edit: false,
    randomKey: Math.random()
  })
}
//清空
const clearAddress = (index: number) => {
  formState.chapters[index].article_content = ''
}

//删除
const deleteAddress = (index: number) => {
  const len = formState.chapters.length
  if (len === 1) return message.warning('不能删除了喔!')
  formState.chapters.splice(index, 1)
}
//是否展示文章类型
const showFilmType = computed(() => {
  if (formState.article_categ_id && formState.article_categ_id != '0') return true
  return false
})
//根据分类查类型
watch(
  () => formState.article_categ_id,
  (val, oldVal) => {
    if (val != oldVal && val != '0') getTypeByClass()
  },
  {
    deep: true
  }
)
watch(
  () => route.name,
  () => {
    resetFormFunc()
  },
  { deep: true }
)
// watch(
//   () => formState.chapters,
//   (val) => {
//     var countArr: any = []
//     var count=0
//     formState.chapters.forEach((item: any) => {
//       if (countArr.includes(item.chapter_no) {
//         count++
//       }
//     })
//     return count
//   }
// )
const validateFunc = () => {
  const params = { ...formState }
  params.site_id = siteId
  console.log('params.site_id: ', params.site_id)
  console.log('params2: ', params)
  basicRef.value
    ?.validate()
    .then(() => {
      console.log(articleId.value, 'articleId.value')
      if (!articleId.value) {
        add_article(params).then(() => {
          message.success('保存文章成功')
          resetFormFunc()
          router.back()
        })
      } else {
        params.article_id = articleId.value
        console.log('params3: ', params)
        update_article(params).then(() => {
          message.success('编辑文章成功')
          resetFormFunc()
          router.back()
        })
      }
    })
    .catch(() => {
      message.warning('请检查必填项是否完整')
    })
}
//获取文章详情
const getArticleDetail = () => {
  detail_article({ article_id: articleId.value }).then((res: any) => {
    console.log('res: ', res)
    res.chapters.forEach((item: chaptersItem) => {
      item.is_edit = false
      item.randomKey = Math.random()
    })
    if (res.article_categ_id != '0') {
      classList.value?.push(res.article_categ_id)
    }
    if (res.article_subcateg_id != '0') {
      classList.value?.push(res.article_subcateg_id)
    }
    Object.assign(formState, res)
    console.log('formState=================: ', formState)
    if (res.publish_state === 0) {
      formState.publish_state = 1
    }
    if (formState?.article_name ?? ''.length > 50) formState.article_name = formState?.article_name?.substring(0, 49)
    if (formState?.article_author ?? ''.length > 50)
      formState.article_author = formState?.article_author?.substring(0, 49)
    if (formState?.article_introduction ?? ''.length > 1000)
      formState.article_introduction = formState?.article_introduction?.substring(0, 1000)

    //扩展信息是否开启补偿
    if (formState.article_pop_compensated === 1) {
      isPopularity.value = true
    } else {
      isPopularity.value = false
    }
    // classList.value = [res?.article_categ_idres ?? undefined, res?.article_subcateg_id ?? undefined]
    // Object.assign(extendInfo, res)
    if (formState.article_cover_vertical) {
      if (formState.article_cover_vertical_type === 1) {
        verticalPreviewImage.value = baseUrl + formState.article_cover_vertical
      } else {
        verticalPreviewImage.value = formState.article_cover_vertical
      }
    }
    if (formState.article_cover_horizontal) {
      if (formState.article_cover_horizontal_type === 1) {
        horizontalPreviewImage.value = baseUrl + formState.article_cover_horizontal
      } else {
        horizontalPreviewImage.value = formState.article_cover_horizontal
      }
    }
    formState.article_album_ids = res.article_album.map((item: any) => {
      return item.album_id
    })
    formState.article_tags_copy = res.article_tags.map((item: any) => {
      return item.tag_name
    })
    formState.type_ids = res.article_types.map((item: any) => {
      return item.type_id
    })
    console.log('formState.article_tags_copy123123: ', formState.article_tags_copy)
    console.log('formState123123: ', formState)
  })
}
defineExpose({ validateFunc })
onMounted(() => {
  forbidden()
  getClassList() //获取分类下拉
  getAlbumList() //获取专辑下拉
  articleId.value = router.currentRoute.value.query?.id as string
  console.log('articleId.value: ', articleId.value)
  if (!articleId.value) return false
  getArticleDetail()
})
// watch(
//   () => route.fullPath,
//   () => {
//     document.removeEventListener('drop', forbidden, true)
//   },
//   { deep: true, immediate: true }
// )
// onUnmounted(() => {
// document.removeEventListener('drop', forbidden, true)
// })
</script>

<style lang="less" scoped>
.page-basic {
  :deep(.ant-form) {
    .m-r-95 {
      margin-right: 95px;
    }

    .m-r-6 {
      margin-right: 6px;
    }

    .page-basic-hasBtn {
      display: flex;
      flex-wrap: wrap;
      width: 90%;

      .ant-form-item-control-input-content {
        display: flex;
      }
    }

    .page-basic-classify {
      display: flex;
      flex-wrap: wrap;
      width: 90%;

      .ant-form-item-control-input-content {
        .select-w-200 {
          width: 200px;
          margin-right: 8px;
        }
      }
    }

    .page-basic-three-column {
      width: 90%;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .ant-form-item-control-input-content {
        .input-w-400 {
          width: 400px;
        }
      }
    }

    /**
      .page-basic-three-column::after {
      content: '';
      flex: 1;
    }
    */

    .page-basic-filmType {
      width: 90%;
      display: flex;
      flex-wrap: wrap;

      .ant-checkbox-wrapper {
        margin: 8px 0;
      }
    }

    .page-basic-common {
      width: 90%;
      padding: 24px 0 0;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f0;

      &-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 1.14px;
        font-weight: 500;
        margin-bottom: 24px;
      }

      .ant-table .ant-table-container::after {
        width: 0px;
      }

      .address-content {
        margin-left: 72px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &-file {
          width: 48%;
          margin: 8px 0;

          &-top {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .left-title {
              display: flex;
              align-items: center;
              margin: 2px 0;

              &-title {
                font-size: 14px;
                color: #262626;
                letter-spacing: 0;
                display: flex;
                align-items: center;

                div {
                  width: 44px;
                  text-align: center;
                }
              }

              .ant-btn {
                margin: 0 16px;
              }

              &-input {
                max-width: 220px;
                border-radius: 3px;
              }
            }

            .right-btn {
              display: flex;
              align-items: center;
              margin: 2px 0;

              .ant-btn {
                height: 26px;
              }

              .ant-btn:not(:last-child) {
                margin-right: 8px;
              }

              .ant-btn:last-child {
                background: rgba(254, 76, 77, 0.08);
                border: 1px solid rgba(254, 76, 77, 1);
              }
            }
          }

          &-textarea {
            min-height: 160px;
            margin: 8px 0 9px;

            textarea {
              min-height: 160px;
            }
          }

          &-addressText {
            width: 100%;
            min-height: 160px;
            margin: 8px 0 9px;
            border: 1px solid rgba(217, 217, 217, 1);
            border-radius: 3px;
            min-height: 160px;
            padding: 10px;

            &-images {
              width: 100%;
              min-height: calc(100% - 44px);
            }

            &-buttons {
              width: 100%;
              display: flex;
              justify-content: flex-end;
              border-top: 1px solid #f0f0f0;
              height: 44px;

              .ant-btn {
                margin-right: 10px;
              }
            }
          }
        }

        &-url {
        }
      }

      .source-introduce {
        font-size: 12px;
        margin-top: 8px;
        color: #bfbfbf;
      }

      .ant-form-item-control-input-content {
        display: flex;

        .ant-radio-group {
          margin: 5px 0 15px !important;
        }
      }
    }
  }
}
</style>
